<template>
  <div class="container contract-review pb">
    <p class="bread">
      <a href="#/index/transaction-evaluate">交易监控服务评价</a> >
      <a href="javascript:void(0);" class="font-s-16">评价详情</a>
    </p>
    <div class="bg-c-fff box-border">
      <h3 class="tm-title">客户信息</h3>
      <div class="companyInfo">
        <p>企业名称：{{account}}</p>
        <p>地址：{{address}}</p>
        <p>电话：{{phone}}</p>
        <p>邮箱：{{email}}</p>
      </div>
      <div class="companyInfo">
        <span>监控师：{{this.$route.query.monitorName}}</span>
        <span>监控员：{{this.$route.query.workerName}}</span>
      </div>
    </div>
    <div class="content">
      <h3 class=" bg-c-fff">评价详情</h3>
      <div class="box bg-c-fff">
        <h4>1.合同审查、交易监控流程图绘制阶段</h4>
        <evaluate ref="num1" disabled></evaluate>
        <textarea placeholder="请您留下宝贵意见" v-model="evaluateOne" readonly="readonly">
        </textarea>
      </div>
      <div class="box bg-c-fff">
        <h4>2.交易监控进行阶段</h4>
        <evaluate ref="num2" disabled></evaluate>
        <textarea placeholder="请您留下宝贵意见" v-model="evaluateTwo" readonly="readonly">
        </textarea>
      </div>
      <div class="box bg-c-fff">
        <h4>3.整体服务满意程度</h4>
        <evaluate ref="num3" disabled>
        </evaluate>
        <ul>
          <li class="dib">
            <input type="checkbox" id="a" value="系统操作繁琐" v-model="checkboxA" class="vm" readonly="readonly">
            <label for="a">系统操作繁琐</label>
          </li>
          <li class="dib">
            <input type="checkbox" id="b" value="服务人员态度恶劣" v-model="checkboxB" class="vm" readonly="readonly">
            <label for="b">服务人员态度恶劣</label>
          </li>
          <li class="dib">
            <input type="checkbox" id="c" value="系统使用卡顿严重" v-model="checkboxC" class="vm" readonly="readonly">
            <label for="c">系统使用卡顿严重</label>
          </li>
          <li class="dib">
            <input type="checkbox" id="d" value="对我无帮助" v-model="checkboxD" class="vm" readonly="readonly">
            <label for="d">对我无帮助</label>
          </li>
        </ul>
        <textarea placeholder="请您留下宝贵意见" v-model="evaluateThree" readonly="readonly">
        </textarea>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import Step from '../components/Step'
import Evaluate from '../components/Evaluate'
export default {
  components: {
    Step,
    Evaluate
  },
  data() {
    return {
      evaluateOne: '',
      evaluateTwo: '',
      evaluateThree: '',
      checkboxA: '',
      checkboxB: '',
      checkboxC: '',
      checkboxD: '',
      userId: '',
      account: '',
      address: '',
      phone: '',
      email: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
    this.$http.post('/evaluate/query/tradeEvaluate/byId', {
      id: this.$route.query.id
    }).then(data => {
      if (data.data.httpCode === 200) {
        this.$refs.num1.index = data.data.data.satisfactory.split(',')[0]
        this.$refs.num2.index = data.data.data.satisfactory.split(',')[1]
        this.$refs.num3.index = data.data.data.satisfactory.split(',')[2]
        this.evaluateOne = data.data.data.evaluateContentOne
        this.evaluateTwo = data.data.data.evaluateContentTwo
        let contentThree = data.data.data.evaluateContentThree
        this.evaluateThree = contentThree.split('~@$')[0]
        this.checkboxA = contentThree.split('~@$')[1].split(',')[0]
        this.checkboxB = contentThree.split('~@$')[1].split(',')[1]
        this.checkboxC = contentThree.split('~@$')[1].split(',')[2]
        this.checkboxD = contentThree.split('~@$')[1].split(',')[3]
        this.userId = data.data.data.customId
        this.getUserData()
      } else {
        console.log(data.data.msg)
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
    },
    getUserData() {
      this.$http.get('/memberBusniess/query/busniessInfo/byMemberId', {
        params: {
          memberId: this.userId
        }
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.account = data.data.data.account
          this.address = data.data.data.address.replace(/,/g, '')
          this.phone = data.data.data.phone
          this.email = data.data.data.email
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}

</script>
<style type="text/css" scoped>
.box-border {
  border: 1px solid #ddd;
}

.tm-title {
  line-height: 40px;
  padding-left: 35px;
  font-size: 14px;
  color: #282828;
  border-bottom: 1px solid #ddd;
}

.content .box {
  padding: 20px 40px;
  margin-bottom: 15px;
}

.content .box .white-button {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 5px 74px 5px 0;
}

.content .box .box-border-top {
  border-top: 1px solid #ddd;
}

.pb {
  padding-bottom: 50px;
}

.content h3 {
  border-bottom: 1px solid #dddddd;
  color: #282828;
  line-height: 40px;
  padding-left: 40px;
  font-size: 14px;
  margin-top: 15px;
}

.content h4 {
  font-weight: bold;
  color: #282828;
  line-height: 40px;
}

.content .box ul li {
  margin: 23px 20px 10px 0;
}

textarea {
  width: 100%;
  height: 120px;
  margin-top: 15px;
  border-color: #ddd;
  padding: 10px 7px;
}

.companyInfo {
  padding: 10px 36px;
}

.companyInfo p,
.companyInfo span {
  line-height: 30px;
}

.companyInfo span {
  margin-right: 20px;
}

</style>
